<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container">
    <img src="@/assets/imgs/pic/1.png" class="article-pic"/>
    <p  class="hot" @click="jump(item.type,item)" v-for="(item,index) in data" :key="index"></p>
    <aside v-if="current && current.type!=3">
      <section class="box">
        <span class="text" v-if="current.text">{{current.text}}</span>
        <img :src="current.img"  class="wx-img" v-if="current.img"/>
        <span class="closeBtn" @click="closeFn()"></span>
      </section>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current:null,
      data:[
        {type:3,url:'https://mp.weixin.qq.com/s/jqCcHSXntiDH9j6d4gwpOQ'},
        {type:2,img:require('../../assets/imgs/hdxh.png')},
        {type:3,url:'https://shop57101936.m.taobao.com/?spm=2013.1.0.0.ad701596zRtHM3%EF%BC%9A'},
        {type:2,img:require('../../assets/imgs/kmyd.png')},
        {type:3,url:'https://shop78196247.m.youzan.com/v2/feature/JcHRvu6S8C?shopAutoEnter=1&kdt_id=78004079'},
        {type:3,url:'https://shop.m.jd.com/?shopId=38797'},
        {type:3,url:'https://mp.weixin.qq.com/s?__biz=MzA4Mjg3ODEwMg==&mid=2651696946&idx=1&sn=d36587ac7ca525eaa81f3669656da45c&chksm=840604cbb3718ddd512bae38317d95bb35239e231ab23c076c5cd30f750c8f214184b402195d&token=239563494&lang=zh_CN'},
        {type:1,text:'微信客服账号：missM0727000'},
        {type:2,img:require('../../assets/imgs/xtc.png')},
        {type:3,url:'https://pro.m.jd.com/mall/active/aR867ENZvvSbPs6pu1dr8VGp9ik/index.html'}
      ]
    };
  },
  methods: {},
  mounted() {
  },
  methods: {
    jump(type,item){
      this.current=item;
      if(type!=3){
        return
      }
      location.href=item.url;
    },
    closeFn(){
      this.current=null
    }
  },
};
</script>

<style lang="scss" scoped>
  .container {
    margin-bottom: 100px;
    position: relative;
    p.hot {
      width: 90%;
      left: 5%;
      height: 5.5rem;
      position: absolute;
      z-index: 1;
      top: 10rem;
      &:nth-child(3){
        top: 16.2rem;
      }
      &:nth-child(4){
        top: 22.5rem;
      }
      &:nth-child(5){
        top: 28.9rem;
      }
      &:nth-child(6){
        top: 35.2rem;
      }
      &:nth-child(7){
        top: 41.2rem;
      }
      &:nth-child(8){
        top: 48rem;
      }
      &:nth-child(9){
        top: 54rem;
      }
      &:nth-child(10){
        top: 61.5rem;
      }
      &:nth-child(11){
        top: 68.5rem;
      }
    }
  }


</style>
